<template>
    <el-card shadow="hover" class="layout-padding-auto">
        <!-- <div class="system-user-search mb15">
            <el-input size="default" placeholder="请输入平台名称" style="max-width: 180px" v-model="state.tableData.param.param.cname.val"> </el-input>
            <el-button size="default" type="primary"  @click="seachClick">
                <el-icon>
                    <ele-Search />
                </el-icon>
                查询
            </el-button>
        </div> -->
        <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
            <el-table-column prop="user_name" label="用户名" show-overflow-tooltip></el-table-column>
            <el-table-column prop="nickname" label="昵称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="click_count" label="点击数" show-overflow-tooltip></el-table-column>
            <el-table-column label="用户数" show-overflow-tooltip>
                <template #default="scope">
                    <span @click="openClick(scope.row)" style="cursor: pointer;">{{scope.row.user_count}}</span>
                </template>
            </el-table-column>
            <el-table-column label="转化率" show-overflow-tooltip>
                <template #default="scope">
                    {{scope.row.click_count?(scope.row.user_count/scope.row.click_count * 100).toFixed(2) : '0.00'}}%
                </template>
            </el-table-column>
            <el-table-column prop="inviter_code" label="邀请码" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="150">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="copy(scope.row.inviter_link)">复制邀请链接</el-button>
					</template>
				</el-table-column>
        </el-table>
        <el-pagination
            @size-change="onHandleSizeChange"
            @current-change="onHandleCurrentChange"
            class="mt15"
            :pager-count="5"
            :page-sizes="[10, 20, 30]"
            v-model:current-page="state.tableData.param.page"
            background
            v-model:page-size="state.tableData.param.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="state.tableData.total"
        >
        </el-pagination>
    </el-card>
    <el-drawer
        v-model="state.drawer"
        size="80%"
        title="用户列表"
    >
        <proxyuser ref="proxyuserRef"/>
    </el-drawer>
</template>

<script setup name="invitationAdmin">
import { reactive, onMounted, ref,nextTick } from 'vue';
import { statisticsApi } from '/@/api/statistics/index';
import { ElMessage } from 'element-plus'
import proxyuser from './proxyuser.vue';
const paramOp = {
	cname:'%%'
}
let proxyuserRef = ref(null);
const state = reactive({
    drawer:false,
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			param:{
				cname:{},
			},
			page: 1,
			limit: 10,
		},
	},
});
//打开推广员推广的人员
const openClick = async(row) => {
    state.drawer = true
    await nextTick() // 等待下一个DOM更新周期
    proxyuserRef.value.setInviter(row.inviter_code)
}
const copy = async(text) => {
    try {
		await navigator.clipboard.writeText(text)
		ElMessage.success('邀请链接已复制到剪贴板')
	} catch (error) {
		const textarea = document.createElement('textarea')
		textarea.value = text
		textarea.style.position = 'fixed'
		textarea.style.opacity = '0'
		document.body.appendChild(textarea)
		textarea.select()
		document.execCommand('copy')
		document.body.removeChild(textarea)

		ElMessage.success('邀请链接已复制到剪贴板')
	}
}
// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	for (let key in state.tableData.param.param) {
		if (state.tableData.param.param[key].val && state.tableData.param.param[key].val !== '') {
			state.tableData.param.param[key].op = paramOp[key] || '='
		}else{
			state.tableData.param.param[key] = {}
		}
	}
    statisticsApi().adminstatistics(state.tableData.param).then(res=>{
        state.tableData.data = res.data.list;
        state.tableData.total = res.data.total;
        state.tableData.loading = false;
    })
};
const seachClick = () =>{
	onHandleCurrentChange(1)
}
// 分页改变
const onHandleSizeChange = (val) => {
	state.tableData.param.limit = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	state.tableData.param.page = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
